<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        style="width: 200px;"
        class="filter-item"
        placeholder="电池类型"
        v-model="queryForm.type"
      >
      </el-input>
      <el-input
        style="width: 200px;"
        class="filter-item"
        placeholder="生产厂家"
        v-model="queryForm.factory"
      >
      </el-input>
      <el-input
        style="width: 200px;"
        class="filter-item"
        placeholder="模板名"
        v-model="queryForm.batteryTemName"
      >
      </el-input>
      <el-button
        class="filter-item"
        v-permission="'batteryModule:search'"
        @click="doSearchQuery"
        style="margin-left: 10px;"
        type="primary"
        icon="el-icon-search"
        >查询</el-button
      >
      <el-button
        v-permission="'batteryModule:add'"
        class="filter-item"
        style="margin-left: 10px;"
        @click="openCreateDialog"
        type="success"
        icon="el-icon-plus"
        >新增</el-button
      >
      <el-button
        v-permission="'batteryModule:add'"
        class="filter-item"
        style="margin-left: 10px;"
        @click="openBatchAddDialog"
        type="warning"
        icon="el-icon-plus"
        >批量新增</el-button
      >
    </div>
    <el-table
      v-loading="loading"
      @sort-change="handleSortChange"
      :data="records"
      style="width: 100%"
    >
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="tableExpand">
            <el-form-item label="模板名：" class="tableExpanditem">
              <span class="tableExpandspan"
                >&#12288;&#12288;&#12288;{{ props.row.batteryTemName }}</span
              >
            </el-form-item>
            <el-form-item label="模板编号：" class="tableExpanditem">
              <span class="tableExpandspan"
                >&#12288;&#12288;{{ props.row.batteryTempCode }}</span
              >
            </el-form-item>
            <el-form-item label="生产厂家：" class="tableExpanditem">
              <span class="tableExpandspan"
                >&#12288;&#12288;{{ props.row.factory }}</span
              >
            </el-form-item>
            <el-form-item label="电池型号：" class="tableExpanditem">
              <span class="tableExpandspan"
                >&#12288;&#12288;{{ props.row.model }}</span
              >
            </el-form-item>
            <el-form-item label="电池类型：" class="tableExpanditem">
              <span class="tableExpandspan"
                >&#12288;&#12288;{{ Dicts.BATTERY_TYPE[props.row.type] }}</span
              >
            </el-form-item>
            <el-form-item label="标称容量：" class="tableExpanditem">
              <span class="tableExpandspan"
                >&#12288;&#12288;{{ props.row.volume }}</span
              >
            </el-form-item>
            <el-form-item label="标称能量：" class="tableExpanditem">
              <span class="tableExpandspan"
                >&#12288;&#12288;{{ props.row.energy }}</span
              >
            </el-form-item>
            <el-form-item label="充电截止电压：" class="tableExpanditem">
              <span class="tableExpandspan">{{ props.row.cutoffPowerIn }}</span>
            </el-form-item>
            <el-form-item label="放电截止电压：" class="tableExpanditem">
              <span class="tableExpandspan">{{
                props.row.cutoffPowerOut
              }}</span>
            </el-form-item>
            <el-form-item label="外观：" class="tableExpanditem">
              <span class="tableExpandspan"
                >&#12288;&#12288;&#12288;&#12288;{{
                  props.row.appearance
                }}</span
              >
            </el-form-item>
            <el-form-item label="所属项目：" class="tableExpanditem">
              <span class="tableExpandspan"
                >&#12288;&#12288;{{ props.row.projectName }}</span
              >
            </el-form-item>
            <el-form-item label="DCR：" class="tableExpanditem">
              <span class="tableExpandspan"
                >&#12288;&#12288;&#12288;&#12288;{{ props.row.dcr }}</span
              >
            </el-form-item>
            <el-form-item label="初始电压：" class="tableExpanditem">
              <span class="tableExpandspan"
                >&#12288;&#12288;{{ props.row.firstVolt }}</span
              >
            </el-form-item>
            <el-form-item label="初始正极绝缘：" class="tableExpanditem">
              <span class="tableExpandspan">{{
                props.row.firstRightInsulation
              }}</span>
            </el-form-item>
            <el-form-item label="初始负极绝缘：" class="tableExpanditem">
              <span class="tableExpandspan">{{
                props.row.firstNegativeInsulation
              }}</span>
            </el-form-item>
            <el-form-item label="初始充电能量：" class="tableExpanditem">
              <span class="tableExpandspan">{{ props.row.firstEnergyIn }}</span>
            </el-form-item>
            <el-form-item label="初始放电能量：" class="tableExpanditem">
              <span class="tableExpandspan">{{
                props.row.firstEnergyOut
              }}</span>
            </el-form-item>
            <el-form-item label="初始充电容量：" class="tableExpanditem">
              <span class="tableExpandspan">{{
                props.row.firstCapacityIn
              }}</span>
            </el-form-item>
            <el-form-item label="初始放电容量：" class="tableExpanditem">
              <span class="tableExpandspan">{{
                props.row.firstCapacityOut
              }}</span>
            </el-form-item>
            <el-form-item label="模组编号：" class="tableExpanditem">
              <span class="tableExpandspan"
                >&#12288;&#12288;{{ props.row.code }}</span
              >
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        prop="batteryTemName"
        label="模板名"
        width="150"
        align="center"
      >
      </el-table-column>
      <el-table-column prop="type" label="电池类型" width="130" align="center">
        <template slot-scope="scope">
          {{ Dicts.BATTERY_TYPE[scope.row.type] }}
        </template>
      </el-table-column>
      <el-table-column prop="model" label="电池型号" width="150" align="center">
      </el-table-column>
      <el-table-column
        prop="volume"
        label="标称容量"
        width="130"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="energy"
        label="标称能量"
        width="130"
        align="center"
      >
      </el-table-column>
      <el-table-column prop="rowId" label="模组编号" width="130" align="center">
      </el-table-column>
      <el-table-column
        prop="firstVolt"
        label="初始电压"
        width="130"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="firstRightInsulation"
        label="初始正极绝缘"
        width="150"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="firstNegativeInsulation"
        label="初始负极绝缘"
        width="150"
        align="center"
      >
      </el-table-column>
      <el-table-column prop="dcr" label="DCR" width="100" align="center">
      </el-table-column>
      <el-table-column
        align="center"
        label="操作"
        class-name="small-padding"
        fixed="right"
        width="250"
      >
        <template slot-scope="scope">
          <el-button
            v-permission="'batteryModule:edit'"
            size="mini"
            type="primary"
            @click="editBatteryById(scope.row.rowId)"
            title="编辑"
            icon="el-icon-edit"
            circle
          ></el-button>
          <el-button
            v-permission="'batteryModule:delete'"
            size="mini"
            type="danger"
            @click="handleDelete(scope.row.rowId)"
            title="删除"
            icon="el-icon-delete"
            circle
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryForm.current"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="queryForm.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="queryForm.total"
      >
      </el-pagination>
    </div>
    <el-dialog
      title="新增模组"
      :visible.sync="dialogAddFormVisible"
      :before-close="handleDialogClose"
      width="50%"
    >
      <el-input
        style="width: 650px;margin-left:140px;margin-bottom:30px;"
        class="filter-item"
        @input="queryTemp"
        placeholder="扫描二维码"
        v-model="qr.qrCode"
      >
      </el-input>
      <el-form :model="addFormtemp" label-width="160px" ref="addFormtemp">
        <el-row>
          <el-col :span="12">
            <el-form-item label="模板编号:" prop="batteryCode">
              {{ addFormtemp.batteryCode }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="生产厂家:" prop="factoryName">
              {{ addFormtemp.factoryName }}
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="型号:" prop="model">
              {{ addFormtemp.model }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="电池类型:" prop="type">
              {{ Dicts.BATTERY_TYPE[addFormtemp.type] }}
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="标称容量:" prop="volume">
              {{ addFormtemp.volume }}
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="标称能量:" prop="energy">
              {{ addFormtemp.energy }}
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="充电截止电压:" prop="cutoffPowerIn">
              {{ addFormtemp.cutoffPowerIn }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="放电截止电压:" prop="cutoffPowerOut">
              {{ addFormtemp.cutoffPowerOut }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="模组编号:" prop="batteryCode2">
              {{ addFormtemp.batteryCode2 }}
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-form
        :model="addForm"
        label-width="160px"
        :rules="addFormRules"
        ref="addForm"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="外观:" prop="appearance">
              <el-radio v-model="addForm.appearance" :label="1">完整</el-radio>
              <el-radio v-model="addForm.appearance" :label="0"
                >不完整</el-radio
              >
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属项目:" prop="projectId">
              <el-select
                v-model="addForm.projectId"
                placeholder="请选择所属项目"
                style="width: 100%;"
                filterable
              >
                <el-option
                  v-for="(item, index) in projects"
                  :key="index"
                  :value="item.rowId"
                  :label="item.name"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="DCR:" prop="dcr">
              <el-input v-model="addForm.dcr" auto-complete="off"> </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="初始电压:" prop="firstVolt">
              <el-input v-model="addForm.firstVolt" auto-complete="off">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="初始正极绝缘:" prop="firstRightInsulation">
              <el-input
                v-model="addForm.firstRightInsulation"
                auto-complete="off"
              >
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="初始负极绝缘:" prop="firstNegativeInsulation">
              <el-input
                v-model="addForm.firstNegativeInsulation"
                auto-complete="off"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="初始充电能量:" prop="firstEnergyIn">
              <el-input v-model="addForm.firstEnergyIn" auto-complete="off">
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="初始放电能量:" prop="firstEnergyOut">
              <el-input v-model="addForm.firstEnergyOut" auto-complete="off">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="初始充电容量:" prop="firstCapacityIn">
              <el-input v-model="addForm.firstCapacityIn" auto-complete="off">
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="初始放电容量:" prop="firstCapacityOut">
              <el-input v-model="addForm.firstCapacityOut" auto-complete="off">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAddFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveAddForm">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="编辑模组" :visible.sync="dialogFormVisible" width="50%">
      <el-form :model="detailForm" label-width="160px" ref="detailForm">
        <el-row>
          <el-col :span="12">
            <el-form-item label="外观:" prop="appearance">
              <el-radio v-model="detailForm.appearance" :label="1"
                >完整</el-radio
              >
              <el-radio v-model="detailForm.appearance" :label="0"
                >不完整</el-radio
              >
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属项目:" prop="projectId">
              <el-select
                v-model="detailForm.projectId"
                placeholder="请选择所属项目"
                style="width: 100%;"
                filterable
              >
                <el-option
                  v-for="(item, index) in projects"
                  :key="index"
                  :value="item.rowId"
                  :label="item.name"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="DCR:" prop="dcr">
              <el-input v-model="detailForm.dcr" auto-complete="off">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="初始电压:" prop="firstVolt">
              <el-input v-model="detailForm.firstVolt" auto-complete="off">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="初始正极绝缘:" prop="firstRightInsulation">
              <el-input
                v-model="detailForm.firstRightInsulation"
                auto-complete="off"
              >
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="初始负极绝缘:" prop="firstNegativeInsulation">
              <el-input
                v-model="detailForm.firstNegativeInsulation"
                auto-complete="off"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="初始充电能量:" prop="firstEnergyIn">
              <el-input v-model="detailForm.firstEnergyIn" auto-complete="off">
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="初始放电能量:" prop="firstEnergyOut">
              <el-input v-model="detailForm.firstEnergyOut" auto-complete="off">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="初始充电容量:" prop="firstCapacityIn">
              <el-input
                v-model="detailForm.firstCapacityIn"
                auto-complete="off"
              >
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="初始放电容量:" prop="firstCapacityOut">
              <el-input
                v-model="detailForm.firstCapacityOut"
                auto-complete="off"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveDetailForm">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="批量新增模组"
      :visible.sync="BatchAddDialog"
      :before-close="BatchAddDialogClose"
      width="80%"
    >
      <el-col :span="4">
        <el-select
          v-model="addBatteryTable.batteryTempId"
          placeholder="请选择模板"
          style="width: 200px;"
          filterable
        >
          <el-option
            v-for="(item, index) in batteryTempList"
            :key="index"
            :value="item.rowId"
            :label="item.name"
          ></el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-upload
          class="upload-demo"
          ref="upload"
          accept=".xls,.xlsx"
          action="https://jsonplaceholder.typicode.com/posts/"
          :on-change="upload"
          :on-remove="removeFile"
          :show-file-list="true"
          :limit="1"
          :on-exceed="handleExceed"
          style="width:500px;"
          :auto-upload="false"
        >
          <el-button size="small" slot="trigger" type="primary"
            >选择文件</el-button
          >
          <el-button
            style="margin-left: 10px;"
            size="small"
            type="success"
            @click="renderList"
            >预&#12288;&#12288;览</el-button
          >
          <!-- <div slot="tip" class="el-upload__tip">只能上传xls/xlsx文件</div>            -->
        </el-upload>
      </el-col>
      <el-table
        :data="batteryTable"
        height="500px"
        style="height:500px;margin-top:20px;"
        highlight-current-row
      >
        <el-table-column label="模板名" width="80" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.isSet">
              <el-input
                size="mini"
                placeholder="模板名"
                :disabled="true"
                v-model="sel.batteryTemName"
              ></el-input>
            </span>
            <span v-else>{{ scope.row.batteryTemName }}</span>
          </template>
        </el-table-column>

        <el-table-column label="模组编号" width="130" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.isSet">
              <el-input
                size="mini"
                placeholder="模组编号"
                :disabled="true"
                v-model="sel.batteryTempCode"
              ></el-input>
            </span>
            <span v-else>{{ scope.row.batteryTempCode }}</span>
          </template>
        </el-table-column>

        <el-table-column label="生产厂家" width="100" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.isSet">
              <el-input
                size="mini"
                placeholder="生产厂家"
                :disabled="true"
                v-model="sel.factory"
              ></el-input>
            </span>
            <span v-else>{{ scope.row.factory }}</span>
          </template>
        </el-table-column>

        <el-table-column label="电池型号" width="100" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.isSet">
              <el-input
                size="mini"
                placeholder="电池型号"
                :disabled="true"
                v-model="sel.model"
              ></el-input>
            </span>
            <span v-else>{{ scope.row.model }}</span>
          </template>
        </el-table-column>

        <el-table-column label="电池类型" width="130" align="center">
          <!-- <template slot-scope="scope">
            {{Dicts.BATTERY_TYPE[scope.row.type]}}
          </template> -->
          <template slot-scope="scope">
            <span v-if="scope.row.isSet">
              <el-input
                size="mini"
                placeholder="电池类型"
                :disabled="true"
                v-model="sel.type"
              ></el-input>
            </span>
            <span v-else>{{ scope.row.type }}</span>
          </template>
        </el-table-column>

        <el-table-column label="标称容量" width="130" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.isSet">
              <el-input
                size="mini"
                placeholder="标称容量"
                :disabled="true"
                v-model="sel.volume"
              ></el-input>
            </span>
            <span v-else>{{ scope.row.volume }}</span>
          </template>
        </el-table-column>
        <el-table-column label="标称能量" width="130" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.isSet">
              <el-input
                size="mini"
                placeholder="标称能量"
                :disabled="true"
                v-model="sel.energy"
              ></el-input>
            </span>
            <span v-else>{{ scope.row.energy }}</span>
          </template>
        </el-table-column>

        <el-table-column label="充电截止电压" width="130" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.isSet">
              <el-input
                size="mini"
                placeholder="充电截止电压"
                :disabled="true"
                v-model="sel.cutoffPowerIn"
              ></el-input>
            </span>
            <span v-else>{{ scope.row.cutoffPowerIn }}</span>
          </template>
        </el-table-column>

        <el-table-column label="放电截止电压" width="150" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.isSet">
              <el-input
                size="mini"
                placeholder="放电截止电压"
                :disabled="true"
                v-model="sel.cutoffPowerOut"
              ></el-input>
            </span>
            <span v-else>{{ scope.row.cutoffPowerOut }}</span>
          </template>
        </el-table-column>

        <el-table-column label="模组编号" width="100" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.isSet">
              <el-input
                size="mini"
                placeholder="模组编号"
                v-model="sel.code"
              ></el-input>
            </span>
            <span v-else>{{ scope.row.code }}</span>
          </template>
        </el-table-column>

        <el-table-column label="外观" width="100" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.isSet">
              <el-input
                size="mini"
                placeholder="外观"
                v-model="sel.appearance"
              ></el-input>
            </span>
            <span v-else>{{ scope.row.appearance }}</span>
          </template>
        </el-table-column>
        <el-table-column label="所属项目" width="100" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.isSet">
              <el-input
                size="mini"
                placeholder="所属项目"
                v-model="sel.projectName"
              ></el-input>
            </span>
            <span v-else>{{ scope.row.projectName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="DCR" width="100" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.isSet">
              <el-input
                size="mini"
                placeholder="DCR"
                v-model="sel.dcr"
              ></el-input>
            </span>
            <span v-else>{{ scope.row.dcr }}</span>
          </template>
        </el-table-column>
        <el-table-column label="初始电压" width="100" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.isSet">
              <el-input
                size="mini"
                placeholder="初始电压"
                v-model="sel.firstVolt"
              ></el-input>
            </span>
            <span v-else>{{ scope.row.firstVolt }}</span>
          </template>
        </el-table-column>
        <el-table-column label="初始正极绝缘" width="120" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.isSet">
              <el-input
                size="mini"
                placeholder="初始正极绝缘"
                v-model="sel.firstRightInsulation"
              ></el-input>
            </span>
            <span v-else>{{ scope.row.firstRightInsulation }}</span>
          </template>
        </el-table-column>
        <el-table-column label="初始负极绝缘" width="120" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.isSet">
              <el-input
                size="mini"
                placeholder="初始负极绝缘"
                v-model="sel.firstNegativeInsulation"
              ></el-input>
            </span>
            <span v-else>{{ scope.row.firstNegativeInsulation }}</span>
          </template>
        </el-table-column>
        <el-table-column label="初始充电能量" width="120" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.isSet">
              <el-input
                size="mini"
                placeholder="初始充电能量"
                v-model="sel.firstEnergyOut"
              ></el-input>
            </span>
            <span v-else>{{ scope.row.firstEnergyOut }}</span>
          </template>
        </el-table-column>
        <el-table-column label="初始放电能量" width="120" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.isSet">
              <el-input
                size="mini"
                placeholder="初始放电能量"
                v-model="sel.firstEnergyIn"
              ></el-input>
            </span>
            <span v-else>{{ scope.row.firstEnergyIn }}</span>
          </template>
        </el-table-column>
        <el-table-column label="初始充电电容" width="120" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.isSet">
              <el-input
                size="mini"
                placeholder="初始充电电容"
                v-model="sel.firstCapacityIn"
              ></el-input>
            </span>
            <span v-else>{{ scope.row.firstCapacityIn }}</span>
          </template>
        </el-table-column>
        <el-table-column label="初始放电电容" width="120" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.isSet">
              <el-input
                size="mini"
                placeholder="初始放电电容"
                v-model="sel.firstCapacityOut"
              ></el-input>
            </span>
            <span v-else>{{ scope.row.firstCapacityOut }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="操作"
          class-name="small-padding"
          fixed="right"
          width="250"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              round
              plain
              @click="editRow(scope.row, scope.$index)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="success"
              round
              plain
              @click.stop="saveRow(scope.row, scope.$index)"
              >保存</el-button
            >
            <el-button
              size="mini"
              type="danger"
              round
              plain
              @click="deleteRow(batteryTable, scope.$index)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeBatchAddDialog">取 消</el-button>
        <el-button type="primary" @click="saveBatchDeta">提 交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  queryBattery,
  queryTemp,
  addBattery,
  getValidSimsList,
  deleteBattery,
  findBatteryById,
  editBattery,
  addBatterys
} from '@/api/battery'
import XLSX from 'xlsx'
export default {
  name: 'PowerList',
  data() {
    return {
      dialogFormVisible: false,
      dialogAddFormVisible: false,
      loading: false,
      BatchAddDialog: false,
      queryForm: {
        current: 1,
        pages: 0,
        total: 0,
        size: 10,
        type: undefined,
        factory: undefined,
        batteryTemName: undefined
      },
      records: [],
      qr: { qrCode: null },
      addForm: {},
      addFormtemp: {},
      batteryTempList: {},
      projects: [],
      detailForm: {},
      batteryList: [],
      batteryTable: [],
      list: [],
      batteryTempId: 0,
      addBatteryTable: {
        batteryTempId: '',
        batterys: []
      },
      sel: {
        batteryTemName: '',
        batteryTempCode: '',
        factory: '',
        model: '',
        type: '',
        volume: '',
        energy: '',
        cutoffPowerIn: '',
        cutoffPowerOut: '',

        code: '',
        appearance: '',
        projectName: '',
        dcr: '',
        firstVolt: '',
        firstRightInsulation: '',
        firstNegativeInsulation: '',
        firstEnergyOut: '',
        firstEnergyIn: '',
        firstCapacityIn: '',
        firstCapacityOut: '',

        isSet: true
      }, // 选中行
      addFormRules: {
        appearance: [
          { required: true, message: '请选择外观', trigger: 'blur' }
        ],
        projectId: [
          { required: true, message: '请选择所属项目', trigger: 'blur' }
        ],
        dcr: [{ required: true, message: '请输入DCR', trigger: 'blur' }],
        firstVolt: [
          { required: true, message: '请输入初始电压', trigger: 'blur' }
        ],
        firstRightInsulation: [
          { required: true, message: '请输入初始正极绝缘', trigger: 'blur' }
        ],
        firstNegativeInsulation: [
          { required: true, message: '请输入初始负极绝缘', trigger: 'blur' }
        ],
        firstEnergyIn: [
          { required: true, message: '请输入初始充电能量', trigger: 'blur' }
        ],
        firstEnergyOut: [
          { required: true, message: '请输入初始放电能量', trigger: 'blur' }
        ],
        firstCapacityIn: [
          { required: true, message: '请输入初始充电容量', trigger: 'blur' }
        ],
        firstCapacityOut: [
          { required: true, message: '请输入初始放电容量', trigger: 'blur' }
        ]
      },
      connectStatus: Dicts.DEVICE_CONNECT_STATUS
    }
  },
  created() {
    this.doQuery()
  },
  methods: {
    doSearchQuery() {
      this.queryForm.current = 1
      this.doQuery()
    },
    // 分页
    handleCurrentChange(current) {
      this.queryForm.current = current
      this.doQuery()
    },
    handleSizeChange(size) {
      this.queryForm.size = size
      this.doQuery()
    },
    // 当表格的排序条件发生变化的时候会触发该事件
    handleSortChange({ column, prop, order }) {
      this.queryForm.ascs = ''
      this.queryForm.descs = ''
      if (order) {
        if (order === 'ascending') {
          this.queryForm.ascs = column.sortBy
        } else {
          this.queryForm.descs = column.sortBy
        }
      }
      this.queryForm.current = 0
      this.doQuery()
    },
    // 渲染列表
    doQuery() {
      this.loading = true
      queryBattery(this.queryForm).then(({ data: { data } }) => {
        // console.log('电池所有数据', data)
        this.queryForm.current = data.current
        this.queryForm.pages = data.pages
        this.queryForm.total = data.total
        this.queryForm.size = data.size
        this.records = data.records
        this.loading = false
      })
    },
    // 打开新增弹窗
    openCreateDialog() {
      this.loading = true
      queryTemp().then(({ data: { code, data, msg } }) => {
        // console.log("所有模板", data)
        this.loading = false
        if (code === 0) {
          this.batteryTempList = data
        }
      })
      getValidSimsList().then(({ data: { code, data, msg } }) => {
        // console.log("所有项目", data.projects)
        this.loading = false
        if (code === 0) {
          this.projects = data.projects
        }
      })
      this.clearAddDialog()
      this.dialogAddFormVisible = true
      this.$refs.addForm && this.$refs.addForm.resetFields()
    },
    // 填充二维码
    queryTemp() {
      debugger
      if (this.qr.qrCode.length >= 12) {
        this.addFormtemp.batteryCode = this.qr.qrCode.substring(6)
        this.addFormtemp.batteryCode2 = this.qr.qrCode.slice(0, 5)
        this.batteryTempList.forEach((item, index) => {
          if (this.qr.qrCode.substring(6) === item.code) {
            this.addFormtemp.factoryName = item.factoryName // 模组生产厂家
            this.addFormtemp.model = item.modelName // 模组型号
            this.addFormtemp.type = item.type // 模组类型
            this.addFormtemp.code = item.code
            this.addFormtemp.rowId = item.rowId
            this.addFormtemp.volume = item.volume
            this.addFormtemp.energy = item.energy
            this.addFormtemp.cutoffPowerIn = item.cutoffPowerIn
            this.addFormtemp.cutoffPowerOut = item.cutoffPowerOut
          }
        })
        this.$message({
          showClose: true,
          message: '扫描正确',
          type: 'success'
        })
      } else {
        this.$message({
          showClose: true,
          message: '二维码错误',
          type: 'warning'
        })
      }
    },
    // 提交增加模组
    saveAddForm() {
      this.addForm.batteryTempId = this.addFormtemp.rowId
      this.addForm.batteryTempCode = this.addFormtemp.code
      this.addForm.code = this.addFormtemp.batteryCode2
      // console.log("新增模板参数", this.addForm)
      this.$refs.addForm.validate(valid => {
        if (valid) {
          addBattery(this.addForm)
            .then(({ data: { data, msg, code } }) => {
              this.doQuery()
              this.dialogAddFormVisible = false
              this.$message({
                showClose: true,
                message: msg,
                type: 'success'
              })
              this.clearAddDialog()
            })
            .catch(_ => {
              this.loading = false
            })
        } else {
          // console.log('error submit!!')
          return false
        }
      })
    },
    // 当新增弹框关闭时，清空对象
    handleDialogClose() {
      this.clearAddDialog()
      this.dialogAddFormVisible = false
    },
    // 清空对象,添加的对象
    clearAddDialog() {
      this.addForm = {}
      this.qr = {}
      this.addFormtemp = {}
    },
    // 删除电池列
    handleDelete(rowId) {
      this.$confirm('此操作将永久删除该示例, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        deleteBattery(rowId).then(({ data: { data, msg } }) => {
          this.loading = false
          this.doQuery()
          this.$message({
            showClose: true,
            message: msg,
            type: 'success'
          })
        })
      })
    },
    // 打开编辑弹窗
    openEditDialog() {
      this.detailForm = {}
      this.dialogFormVisible = true
      getValidSimsList().then(({ data: { code, data, msg } }) => {
        // console.log("所有项目", data.projects)
        this.loading = false
        if (code === 0) {
          this.projects = data.projects
        }
      })
      this.$refs.detailForm && this.$refs.detailForm.resetFields()
    },
    // 编辑
    editBatteryById(rowId) {
      this.loading = true
      this.openEditDialog()
      findBatteryById(rowId).then(({ data: { code, data, msg } }) => {
        this.loading = false
        if (code === 0) {
          // console.log("编辑", data)
          this.detailForm = {
            rowId: rowId,
            projectId: data.projectId,
            dcr: data.dcr,
            appearance: parseInt(data.appearance),
            firstVolt: data.firstVolt,
            firstRightInsulation: data.firstRightInsulation,
            firstNegativeInsulation: data.firstNegativeInsulation,
            firstEnergyIn: data.firstEnergyIn,
            firstEnergyOut: data.firstEnergyOut,
            firstCapacityIn: data.firstCapacityIn,
            firstCapacityOut: data.firstCapacityOut
          }
        }
      })
    },
    // 提交编辑
    saveDetailForm() {
      this.$refs.detailForm.validate(valid => {
        if (valid) {
          editBattery(this.detailForm).then(({ data: { data, msg, code } }) => {
            if (code === 0) {
              this.doQuery()
              this.dialogFormVisible = false
            }
            this.$message({
              showClose: true,
              message: msg,
              type: code === 0 ? 'success' : 'error'
            })
          })
        } else {
          // console.log('error submit!!')
          return false
        }
      })
    },
    // 批量新增
    openBatchAddDialog() {
      this.BatchAddDialog = true
      queryTemp().then(({ data: { code, data, msg } }) => {
        // console.log("所有模板", data)
        if (code === 0) {
          this.batteryTempList = data
        }
      })
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      )
    },

    upload(file, fileList) {
      // console.log("file", file);
      // console.log("fileList", fileList);
      const files = { 0: file.raw }
      this.readExcel1(files)
    },
    // 表格导入
    readExcel1(files) {
      // var that = this
      // console.log(files);
      if (files.length <= 0) {
        // 如果没有文件名
        return false
      } else if (!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) {
        this.$Message.error('上传格式不正确，请上传xls或者xlsx格式')
        return false
      }
      const fileReader = new FileReader()
      fileReader.onload = ev => {
        try {
          const data = ev.target.result
          const workbook = XLSX.read(data, {
            type: 'binary'
          })
          const wsname = workbook.SheetNames[0] // 取第一张表
          const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]) // 生成json表格内容
          // console.log(ws)
          this.batteryList = ws
          // that.peopleArr = [];//清空接收数据
          // if(that.peopleArr.length == 1 && that.peopleArr[0].roleName == "" && that.peopleArr[0].enLine == ""){
          //     that.peopleArr = [];
          // }
          // 重写数据
          try {
            // continue regardless of error
          } catch (err) {}
          this.$refs.upload.value = ''
        } catch (e) {
          return false
        }
      }
      fileReader.readAsBinaryString(files[0])
    },
    // 渲染列表
    renderList() {
      // vue.js不能监听对象属性的添加和删除，因为在vue组件初始化的过程中，会调用getter和setter方法，所以该属性必须是存在在data中，视图层才会响应该数据的变化
      var result = this.batteryList.map(o => {
        return {
          batteryTemName: o['模板名称'],
          batteryTempCode: o['模板编号'],
          factory: o['生产厂家'],
          model: o['型号'],
          type: o['电池类型'],
          volume: o['标称容量'],
          energy: o['标称能量'],
          cutoffPowerIn: o['充电截至电压'],
          cutoffPowerOut: o['放电截至电压'],
          code: o['模组编号'],
          appearance: o['外观'],
          projectName: o['所属项目'],
          dcr: o['DCR'],
          firstVolt: o['初始电压'],
          firstRightInsulation: o['初始正极绝缘'],
          firstNegativeInsulation: o['初始负极绝缘'],
          firstEnergyOut: o['初始充电能量'],
          firstEnergyIn: o['初始放电能量'],
          firstCapacityIn: o['初始充电电容'],
          firstCapacityOut: o['初始放电电容']
        }
      })

      for (var k = 0, length = result.length; k < length; k++) {
        this.$set(result[k], 'isSet', true)
      }
      this.batteryTable = result
    },
    // 关闭批量新增弹窗
    closeBatchAddDialog() {
      this.BatchAddDialogClose()
    },
    // 监视关闭批量新增弹窗
    BatchAddDialogClose() {
      this.batteryTable = []
      this.batteryList = []
      this.list = []
      this.batteryTempList = []
      this.addBatteryTable = {
        batteryTempId: '',
        batterys: []
      }
      this.removeFile()
      this.sel = {
        batteryTemName: '',
        batteryTempCode: '',
        factory: '',
        model: '',
        type: '',
        volume: '',
        energy: '',
        cutoffPowerIn: '',
        cutoffPowerOut: '',

        code: '',
        appearance: '',
        projectName: '',
        dcr: '',
        firstVolt: '',
        firstRightInsulation: '',
        firstNegativeInsulation: '',
        firstEnergyOut: '',
        firstEnergyIn: '',
        firstCapacityIn: '',
        firstCapacityOut: '',

        isSet: true
      }
      this.BatchAddDialog = false
    },
    // 移除图例
    removeFile() {
      this.batteryTable = []
      this.batteryList = []
      this.list = []
      this.sel = {
        batteryTemName: '',
        batteryTempCode: '',
        factory: '',
        model: '',
        type: '',
        volume: '',
        energy: '',
        cutoffPowerIn: '',
        cutoffPowerOut: '',

        code: '',
        appearance: '',
        projectName: '',
        dcr: '',
        firstVolt: '',
        firstRightInsulation: '',
        firstNegativeInsulation: '',
        firstEnergyOut: '',
        firstEnergyIn: '',
        firstCapacityIn: '',
        firstCapacityOut: '',

        isSet: true
      }
    },
    // 编辑批量新增
    editRow(row, index) {
      this.sel = row
      row.isSet = true
      this.$set(this.batteryTable, index, {
        ...row,
        isSet: true
      })
      this.$nextTick(() => {})
    },
    // 保存批量新增
    saveRow(row, index) {
      row = this.sel
      row.isSet = false
    },
    // 删除批量新增
    deleteRow(row, index) {
      this.$confirm('是否删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        row.splice(index, 1)
      })
    },
    // 提交批量新增
    saveBatchDeta() {
      this.loading = true
      this.addBatteryTable.batterys = this.batteryTable.map(o => {
        return {
          code: o.code,
          appearance: o.appearance,
          projectName: o.projectName,
          dcr: o.dcr,
          firstVolt: o.firstVolt,
          firstRightInsulation: o.firstRightInsulation,
          firstNegativeInsulation: o.firstNegativeInsulation,
          firstEnergyOut: o.firstEnergyOut,
          firstEnergyIn: o.firstEnergyIn,
          firstCapacityIn: o.firstCapacityIn,
          firstCapacityOut: o.firstCapacityOut
        }
      })
      this.addBatteryTable.batterys = JSON.stringify(
        this.addBatteryTable.batterys
      )
      //  console.log('批量提交的参数',this.addBatteryTable.batterys)
      // console.log('批量提交的参数', this.addBatteryTable)
      if (this.addBatteryTable.batteryTempId) {
        addBatterys(this.addBatteryTable).then(
          ({ data: { data, msg, code } }) => {
            // console.log('批量提交返回', data)
            this.loading = false
            if (data.length !== 0) {
              for (var k = 0, length = data.length; k < length; k++) {
                this.list[k] = this.batteryTable[data[k]]
              }
              this.batteryTable = this.list
              this.doQuery()
              this.$message({
                showClose: true,
                message: '有错误',
                type: 'warning'
              })
            } else {
              this.doQuery()
              this.BatchAddDialog = false
              this.$message({
                showClose: true,
                message: '全部添加成功',
                type: 'success'
              })
            }
          }
        )
      } else {
        this.$message({
          showClose: true,
          message: '请选择模板',
          type: 'warning'
        })
      }
    }
    // statusStyle({ row, column, rowIndex, columnIndex }){

    //   console.log({ column,rowIndex, columnIndex })
    // }
  }
}
</script>

<style scoped lang="scss">
.button_name {
  width: 80px;
  height: 30px;
  background-color: #67c23a;
  font-size: 15px;
  border-radius: 4px;
  color: white;
  border: none;
  outline: none;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}
.button_name {
  -webkit-transition-duration: 0.2s; /* Safari */
  transition-duration: 0.2s;
}
.tableExpand {
  font-size: 0;
  width: 1300px;
}
.tableExpanditem {
  margin-right: 0;
  margin-bottom: 0;
  width: 300px;
}
.tableExpandspan {
  color: #409eff;
}
.button_name:hover {
  background-color: #85ce61; /* Green */
  color: white;
}
.device-status {
  width: 8px;
  height: 8px;
  margin-right: 3px;
  border-radius: 50%;
  display: inline-block;
  background: #a7a7a7;
  &.online {
    background: green;
  }
  &.offline {
    background: red;
  }
  &.sleep {
    background: gray;
  }
}
</style>
